<template>
  <div class="login-wrap">
    <el-form label-position="left" :model="userForm" :rules="rules" ref="userForm" label-width="0px"
      class="login-container">
      <h3 class="title">用户登录</h3>
      <el-form-item prop="name">
        <el-input type="text" v-model="userForm.name" auto-complete="off" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="userForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-checkbox class="remember" v-model="checkPwd" @change="handleCheckPwd">记住密码</el-checkbox>
      <el-form-item style="width: 100%">
        <el-button type="primary" style="width: 100%" @click="submitForm('userForm')" :loading="logining">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { setCookie, getCookie, delCookie } from "../utils/util";
  export default {
    name: "login",
    components: {},
    data() {
      return {
        logining: false,
        checkPwd: false,
        userForm: {
          name: "",
          password: "",
        },
        rules: {
          name: [{ required: true, message: "请输用户名", trigger: "blur" }],
          password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        },
      };
    },
    // 创建完毕状态(里面是操作)
    created() {
      let user = getCookie("user")
      this.userForm.name = user;
      let pwd = getCookie("pwd");
      if (pwd != "") {
        this.checkPwd = true;
      } else {
        this.checkPwd = false;
      }
      this.userForm.password = pwd;

      let that = this;
      document.onkeyup = function (e) {
        e = window.event || e;
        if (e.code == "Enter" || e.code === "enter") {
          that.submitForm("userForm");
        }
      };
    },

    mounted() { },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.logining = true;
            //登录请求
            this.$api.login(this.userForm).then((res) => {
              if (res.code == 200) {
                this.logining = false;
                if (this.checkPwd) {
                  //保存帐号密码到cookie，有效期7天
                  setCookie("pwd", this.userForm.password, 7);
                } else {
                  delCookie("pwd");
                }
                // 缓存用户信息和token
                if (res.data.group != 'admin@group') {
                  this.$message.error('非超管和教师角色无法登录后台');
                  this.logining = false;
                  return false;
                }
                localStorage.setItem("user", res.data.name);
                localStorage.setItem("group", res.data.group);
                localStorage.setItem("token", res.data.jwt);
                setCookie("user", this.userForm.name, 7);
                //存储登录状态
                this.$store.commit("login", res.data.name); //提交登录状态
                //跳转模板页
                if (res.data.name == "atlas") {
                  this.$router.push({ path: "/tmpls" });
                  this.$route.meta.show
                } else {
                  this.$router.push({ path: "/reports" });
                }
              } else {
                this.$message.error(res.msg);
                this.logining = false;
                return false;
              }
            });
          } else {
            this.logining = false;
            return false;
          }
        });
      },
      handleCheckPwd(val) {
        //记住不记住都不用删
      }
    },
  };
</script>

<style scoped>
  .login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-image: url();
    /* background-color: #112346; */
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100%;
  }

  .login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  }

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .remember {
    margin: 0px 0px 35px 0px;
  }

  .code-box {
    text-align: right;
    margin-left: 10px;
  }

  .codeimg {
    height: 40px;
  }
</style>